<template>
  <div>
    <Card>
      <SearchForm @get="handleFormParams"></SearchForm>
    </Card>
    <Card>
      <Table
        class="main-table"
        sticky
        :bordered="true"
        :dataSource="dataSource"
        :columns="columns"
        :pagination="false"
        :loading="loading"
        :scroll="scroll"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'action'">
            <span v-per="'detail'">
              <a @click="show(record)">查看详情</a>
            </span>
          </template>
        </template>
      </Table>
      <br />
      <Pagination
        show-size-changer
        v-model:current="current"
        v-model:pageSize="pageSize"
        :total="total"
        :show-total="(total) => `共 ${total} 条`"
        @showSizeChange="onShowSizeChange"
      />
    </Card>
  </div>
  <Detail ref="detailSwitch" @close="close" />
</template>
<script lang="ts" setup>
import { Card, Table, Pagination } from 'ant-design-vue';
import { ref, watch } from 'vue';
import { getEventListByPage } from '/@/api/maintenance-center/alarm/alarm';
import Detail from '/@/views/maintenance-center/event-monitoring/component/detail.vue';
import SearchForm from '/@/views/maintenance-center/event-monitoring/component/searchForm.vue';
import { columns } from './data';
const dataSource = ref();
const detailSwitch = ref();
const scroll = ref<undefined | object>(undefined);

const loading = ref(true);

let current = ref(1);
const total = ref(0);
const pageSize = ref(10);

let params = {
  eventType: undefined,
  eventName: undefined,
  from: '',
  to: '',
  current: current.value,
  size: pageSize.value,
};
// 获取事件列表
const getDataSource = async () => {
  try {
    let data = await getEventListByPage(params);
    dataSource.value = data.items;
    total.value = data.total;
  } finally {
    loading.value = false;
  }
};

const onShowSizeChange = (current: number, pageSize: number) => {
  params.size = pageSize;
  params.current = current;
  getDataSource();
};
watch(pageSize, (val) => {
  if (val > 10) {
    scroll.value = { y: 500 };
  }
  params.size = pageSize.value;
});
watch(current, () => {
  params.current = current.value;
  getDataSource();
});

getDataSource();
let ts0;
let ts1;
const handleParams = (OriginParams) => {
  params.eventType = OriginParams.eventType;
  params.eventName = OriginParams.eventName;
  if (OriginParams.eventTime) {
    let time = OriginParams.eventTime;
    let date = new Date(time[0]);
    ts0 = date.getTime();

    date = new Date(time[1]);
    ts1 = date.getTime();
    params.from = String(ts0);
    params.to = String(ts1);
  }
};

const handleFormParams = (formParams) => {
  handleParams(formParams);
  getDataSource();
};

const close = () => {
  detailSwitch.value.closeDetail();
};
// 查看详情
const show = (record) => {
  detailSwitch.value.openDetail(record, ts0, ts1);
};
</script>
<style lang="less">
.ant-pagination {
  float: right;
}
</style>
